<template>
    <div class="pd_20" v-loading="loading2" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <div class="font_16 color_01">业务场景汇总</div>
        <el-radio-group v-model="countQuery.group" size="small" style="margin-top:20px" @change="selectGroupAll">
            <el-radio-button :label="1">1 组</el-radio-button>
            <el-radio-button :label="2">2 组</el-radio-button>
            <el-radio-button :label="3">3 组</el-radio-button>
            <el-radio-button :label="4">4 组</el-radio-button>
            <el-radio-button :label="0">全部</el-radio-button>
        </el-radio-group>
        <div class="dm_count flexbox flexcenter">
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_8213_84792)">
                            <path d="M5.63556 2.66675C4.91561 2.96528 4.26773 3.40247 3.72518 3.94502C2.65928 5.01093 2 6.48346 2 8.10996C2 11.363 4.6371 14.0001 7.89012 14.0001C9.51662 14.0001 10.9892 13.3408 12.0551 12.2749C12.5976 11.7324 13.0348 11.0845 13.3333 10.3645" stroke="#4475FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 8H14C14 4.68629 11.3137 2 8 2V8Z" stroke="#4475FF" stroke-width="2" stroke-linejoin="round" />
                        </g>
                        <defs>
                            <clipPath id="clip0_8213_84792">
                                <rect y="0.5" width="16" height="16" rx="4" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>
                    <span class="dm_text">汇总</span>
                </div>
                <div class="dm_num">{{countData.total?countData.total:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.6001 8.46399L4.44374 7.60779L7.57295 8.96351L5.08406 9.7487L1.6001 8.46399ZM5.15485 6.18106L7.99849 5.32567L11.1277 6.68139L8.63881 7.46657L5.15485 6.18106ZM8.42564 3.7561L11.2693 2.8999L14.3985 4.25562L11.9096 5.04081L8.42644 3.7561H8.42564ZM5.01247 14.0999L7.57214 13.2445V8.9627L5.08406 9.74789L5.01166 14.0991L5.01247 14.0999ZM8.56802 12.8152L11.1285 11.959V6.68139L8.64042 7.46657L8.56802 12.8152ZM11.8396 11.6749L14.4001 10.8187V4.25562L11.9112 5.04081L11.8388 11.6741L11.8396 11.6749Z" fill="#4475FF" />
                    </svg>
                    <span class="dm_text">千川-短视频</span>
                </div>
                <div class="dm_num">{{countData.qc_vedio?countData.qc_vedio:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.6001 8.46399L4.44374 7.60779L7.57295 8.96351L5.08406 9.7487L1.6001 8.46399ZM5.15485 6.18106L7.99849 5.32567L11.1277 6.68139L8.63881 7.46657L5.15485 6.18106ZM8.42564 3.7561L11.2693 2.8999L14.3985 4.25562L11.9096 5.04081L8.42644 3.7561H8.42564ZM5.01247 14.0999L7.57214 13.2445V8.9627L5.08406 9.74789L5.01166 14.0991L5.01247 14.0999ZM8.56802 12.8152L11.1285 11.959V6.68139L8.64042 7.46657L8.56802 12.8152ZM11.8396 11.6749L14.4001 10.8187V4.25562L11.9112 5.04081L11.8388 11.6741L11.8396 11.6749Z" fill="#4475FF" />
                    </svg>
                    <span class="dm_text">千川-直播</span>
                </div>
                <div class="dm_num">{{countData.qc_live?countData.qc_live:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="11.5648" cy="8.20297" r="1.68735" fill="#4475FF" />
                        <ellipse cx="10.2237" cy="5.12707" rx="1.47643" ry="1.47643" fill="#4475FF" />
                        <ellipse cx="10.2237" cy="11.3024" rx="1.47643" ry="1.47643" fill="#4475FF" />
                        <circle cx="8.0842" cy="3.43747" r="1.11325" fill="#4475FF" />
                        <ellipse cx="6.38507" cy="5.28522" rx="0.76105" ry="0.76105" fill="#4475FF" />
                        <ellipse cx="7.84479" cy="11.2608" rx="0.76105" ry="0.76105" fill="#4475FF" />
                        <ellipse opacity="0.5" cx="3.90101" cy="2.95033" rx="0.701059" ry="0.701059" fill="#4475FF" />
                        <ellipse opacity="0.5" cx="6.42933" cy="13.8964" rx="0.701059" ry="0.701059" fill="#4475FF" />
                        <circle cx="5.78653" cy="3.15469" r="1.05459" fill="#4475FF" />
                        <ellipse cx="8.21475" cy="13.1659" rx="1.05459" ry="1.05459" fill="#4475FF" />
                        <ellipse opacity="0.5" cx="4.34578" cy="4.62288" rx="0.899981" ry="0.89998" fill="#4475FF" />
                        <circle opacity="0.5" cx="6.18367" cy="12.2025" r="0.899981" fill="#4475FF" />
                    </svg>
                    <span class="dm_text">UD-短视频</span>
                </div>
                <div class="dm_num">{{countData.ud_vedio?countData.ud_vedio:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M7.17597 3.4187L7.96071 6.08682H1.70239L2.50675 3.4187H7.17597Z" fill="#4475FF" />
                        <path d="M3.13465 6.57739L5.82241 7.2248L2.70305 12.6395L0.800049 10.6188L3.13465 6.57739Z" fill="#4475FF" />
                        <path d="M3.84082 11.6584L5.74381 9.6377L8.88278 15.0524L6.17542 15.6998L3.84082 11.6584Z" fill="#4475FF" />
                        <path d="M13.2579 13.5616H8.58872L7.80396 10.9131H14.0623" fill="#4475FF" />
                        <path d="M14.9645 6.3617L12.6299 10.4227L9.94214 9.77532L13.0615 4.3606" fill="#4475FF" />
                        <path d="M11.9236 5.34147L10.0206 7.36219L6.88159 1.92784L9.58896 1.30005L11.9236 5.34147Z" fill="#4475FF" />
                    </svg>
                    <span class="dm_text">巨量-短视频</span>
                </div>
                <div class="dm_num">{{countData.jl_vedio?countData.jl_vedio:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M13.0413 3.17285C10.435 3.17276 8.11255 7.08479 8.11255 8.99777C8.11255 9.30269 9.88184 13.8507 11.1135 13.3724C14.5076 12.0545 15.6477 3.17294 13.0413 3.17285Z" stroke="#4475FF" stroke-width="2" />
                        <path d="M2.97821 3.17279C5.20412 2.96599 7.90698 7.08473 7.90698 8.9977C7.90698 9.0581 6.13769 13.8506 4.90606 13.3724C1.51194 12.0545 0.752304 3.3796 2.97821 3.17279Z" stroke="#4475FF" stroke-width="2" />
                    </svg>
                    <span class="dm_text">腾讯-短视频</span>
                </div>
                <div class="dm_num">{{countData.tex_vedio?countData.tex_vedio:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M8.89917 7.97502C6.44558 7.85665 4.74008 8.73144 3.78266 10.5994C2.34654 13.4013 3.53344 17.9861 8.3245 17.9861C13.1156 17.9861 13.2542 13.3565 13.2542 12.8715C13.2542 12.5481 13.2542 10.7402 13.2542 7.44781C14.2789 8.09685 15.1429 8.48756 15.8462 8.61994C16.5494 8.75227 16.9965 8.81094 17.1874 8.7959V6.09769C16.5369 6.01927 15.9744 5.86977 15.4999 5.64927C14.788 5.31852 13.3765 4.40052 13.3765 3.0551C13.3775 3.06167 13.3775 2.71462 13.3765 2.01392H10.4107C10.4019 8.60394 10.4019 12.2231 10.4107 12.8715C10.424 13.844 9.6695 15.2044 8.13979 15.2044C6.61008 15.2044 5.85563 13.8451 5.85563 12.9684C5.85563 12.4316 6.04 11.6536 6.80213 11.0775C7.25408 10.7358 7.88138 10.5994 8.89917 10.5994C8.89917 10.2846 8.89917 9.40977 8.89917 7.97502Z" fill="#165DFF" />
                    </svg>
                    <span class="dm_text">TK-短视频</span>
                </div>
                <div class="dm_num">{{countData.tk_vedio?countData.tk_vedio:'0'}}</div>
            </div>
            <div class="dm_item">
                <div class="flexbox flexcenter dm_title">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <g clip-path="url(#clip0_12265_46837)">
                            <path d="M8.24742 2.9065L13.0935 7.75259H15.2L8.24742 0.800049V2.9065Z" fill="#165DFF" />
                            <path d="M7.75259 2.90659L2.90658 7.75259H0.800122L7.75259 0.800141V2.90659Z" fill="#165DFF" />
                            <path d="M2.90651 8.24742H0.800049L7.75259 15.1999V13.0935L2.90651 8.24742Z" fill="#165DFF" />
                            <path d="M15.2001 8.24742H13.0936L8.24742 13.0936V15.2L15.2001 8.24742Z" fill="#165DFF" />
                            <path d="M7.75259 3.77888V5.04275L5.04293 7.7524H3.77905L7.75259 3.77888Z" fill="#165DFF" />
                            <path d="M5.04318 8.24723L7.75259 10.9566V12.2205L3.7793 8.24723H5.04318Z" fill="#165DFF" />
                            <path d="M8.24742 10.9569V12.2208L12.221 8.24723H10.9571L8.24742 10.9569Z" fill="#165DFF" />
                            <path d="M8.24742 3.77856V5.04244L10.9574 7.7524H12.2213L8.24742 3.77856Z" fill="#165DFF" />
                        </g>
                        <defs>
                            <clipPath id="clip0_12265_46837">
                                <rect width="16" height="16" fill="white" />
                            </clipPath>
                        </defs>
                    </svg>
                    <span class="dm_text">京易投-短视频</span>
                </div>
                <div class="dm_num">{{countData.jyt_vedio?countData.jyt_vedio:'0'}}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ["countQuery"],
    name: "",
    data() {
        return {
            countData: {},
        };
    },

    created() {},

    methods: {
        selectGroupAll() {
            this.$emit("selectGroupAll");
        },
    },
};
</script>
<style scoped>
.dm_count {
    margin-top: 20px;
}
.dm_item {
    width: 153px;
    height: 75px;
    box-sizing: border-box;
    padding: 12px 10px 0 20px;
    background: rgba(68, 117, 255, 0.05);
    border-radius: 4px;
    margin-right: 12px;
}
.dm_text {
    font-size: 12px;
    margin-left: 8px;
    color: #616c85;
}
.dm_num {
    font-family: D-DIN;
    font-weight: 700;
    color: #17233d;
    font-size: 20px;
    line-height: 26px;
    margin-top: 8px;
}
</style>

